import React, { Component } from 'react';
import { NavBar, Form, Input, Button, Toast } from 'antd-mobile'
import '../../style/Register/Password.scss'
import service from '../../api';


class Password extends Component<any, any>{
    constructor(props: any) {
        super(props);
        this.state = {
            tel: '',
            passValidator: ''
        }
    }
    componentDidMount(): void {
        this.setState({
            passValidator: (rule: any, value: string) => {
                if (/^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])\S*$/.test(value)) {
                    return Promise.resolve();
                } else {
                    return Promise.reject()
                }
            }
        })
    }
    async onFinsh(value: any) {
        console.log(value);
        var res = await service.user.dofinishregister({ tel: value.name, password: value.password })
        console.log(res);
        if (res.data.code == 200) {
            this.props.history.push('/login')
            Toast.show({
                icon: 'success',
                content: '注册成功',
            })
        } else {
            Toast.show({ content: '网络延迟' })
        }
    }

    render() {
        return (
            <div className='password'>
                <div className="top">
                    <NavBar onBack={() => { this.props.history.go(-1) }}>注册</NavBar>
                </div>

                <Form
                    onFinish={(value) => { this.onFinsh(value) }}
                    footer={
                        <Button block type='submit' color='danger' size='large' shape='rounded'>
                            注册
                        </Button>
                    }
                >
                    <Form.Item
                        name='password'
                        rules={[{ required: true, message: '密码:大写+小写+数字最少6位', validator: this.state.passValidator }]}
                    >
                        <Input placeholder='请输入6位数密码' />
                    </Form.Item>
                </Form>
            </div>
        );
    }
}

export default Password;